<template>
	<uni-file-picker ref="upload" :readonly="readonly" :image-styles="imageStyles" v-model="imageValue"
		fileMediatype="image" mode="grid" @select="select" @progress="progress" @success="success" @delete="deletephoto"
		limit="1" @fail="fail" />
</template>

<script>
	import {
		getToken
	} from '@/utils/auth'
	import store from '@/store'
	import {
		getFileName,
		getFileExtension
	} from '@/utils/file'
	import config from '@/config'
	export default {
		props: {
			value: { // 必须要使用value
				default: '',
			},
			readonly: {
				type: Boolean,
				default: false
			},
		},
		model: {
			prop: 'value',
			event: 'valueChanges'
		},
		// props: {
		// 	imageValue: {
		// 		type: Array,
		// 		default: function() {
		// 			return [
		// 				//默认格式
		// 				// {
		// 				// 	"name":"file.txt",
		// 				// 	"extname":"txt",
		// 				// 	"url":"https://xxxx",
		// 				// }

		// 				//上传后对象属性
		// 				// cloudPath: "1675503145608_0.png"
		// 				// extname: "png"
		// 				// fileType: "image"
		// 				// image:Object
		// 				// name: "cpu内存使用率.png"
		// 				// path:"blob:https://localhost:10110/2d62c329-ced4-4b2a-8ecd-336e36bc9eab"
		// 				// progress: 0
		// 				// size: 49225
		// 				// status: "ready"
		// 				// url: "blob:https://localhost:10110/2d62c329-ced4-4b2a-8ecd-336e36bc9eab"
		// 				// uuid: 1675503145610
		// 			]
		// 		}
		// 	}
		// },
		data() {
			return {
				imageValue: [],
				action: "/common/upload", // 上传的图片服务器地址
				header: {
					Authorization: "Bearer " + getToken(),
				},

				imageStyles: {
					// "height": 60, // 边框高度
					// "width": 60, // 边框宽度
					// "border": { // 如果为 Boolean 值，可以控制边框显示与否
					// 	"color": "#eee", // 边框颜色
					// 	"width": "1px", // 边框宽度
					// 	"style": "solid", // 边框样式
					// 	"radius": "50%" // 边框圆角，支持百分比
					// }
				}
			}
		},
		computed: {
			// fullName: {
			// 	get: function() {
			// 		console.log('running get function')
			// 		return this.firstName + ' ' + this.lastName
			// 	},
			// 	set: function(value) {
			// 		console.log('running set function')
			// 		var arr = value.split(' ')
			// 		this.firstName = arr[0]
			// 		this.lastName = arr[1]
			// 	}
			// },
			// auditTime: () => {
			// 	return (timestamp) => (timestamp > 0 ? convertDate(timestamp) : "--");
			// },

			// getUnifilepickerFormat: () => {
			// 	get: function(value) {
			// 		return (value) => {
			// 			if (value) {
			// 				return [{
			// 					"name": getFileName(value),
			// 					"extname": getFileExtension(value),
			// 					"url": value,
			// 				}]
			// 			} else {
			// 				return []
			// 			}
			// 		}
			// 	},
			// 	set: function() {
			// 		this.$emit("input", newValue);
			// 	},
			// }
		},
		watch: {
			// imageValue(val) {
			// 	this.$emit('input', val)
			// },
			value(val) {
				this.imageValue = this.getUnifilepickerFormat(this.value)
				console.log('getUnifilepickerFormat：', this.imageValue)
			}
		},
		mounted() {
			//this.imageValue = this.getUnifilepickerFormat(this.value)
		},
		methods: {
			getUnifilepickerFormat(value) {
				if (value) {
					return [{
						"name": getFileName(value),
						"extname": getFileExtension(value),
						//"url": value,
						"url": store.state.config.areaConfig.baseUrl + unescape(value),
					}]
				} else {
					return []
				}
			},
			// 选择上传触发函数
			select(e) {
				console.log('选择文件：', e)
				// 根据所选图片的个数，多次调用上传函数
				let promises = []
				for (let i = 0; i < e.tempFilePaths.length; i++) {
					const promise = this.uploadFiles(e.tempFilePaths, i)
					promises.push(promise)
				}
				// Promise.all(promises).then(() => {
				// 	console.log('Promise：', promises)
				// })
			},
			// 上传函数
			async uploadFiles(tempFilePaths, i) {
				let that = this
				await uni.uploadFile({
					url: store.state.config.areaConfig.baseUrl + that.action, //后端用于处理图片并返回图片地址的接口    
					filePath: tempFilePaths[i],
					name: 'file',
					header: that.header,
					success: res => {
						console.log('uploadFile：', res)
						//this.$emit('valueChanges', tempFilePaths[i])
						that.$emit("success", JSON.parse(res.data))
					},
					fail: (err) => {
						console.log("err", err, tempFilePaths);
					}
				})
			},

			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},

			// 移出图片函数
			async deletephoto(res) {
				console.log('deletephoto：', res)
				//this.form.attachment = ''
			},
		}
	}
</script>